<template>
  <div>
    <div>
      <el-form :model="carManagement" label-width="80px">
        <el-col :span="5">

          <el-form-item label="车辆编号">
            <el-input
              v-model="carManagement.carNumber"
              placeholder="请输入车牌号码"
              readonly
            ></el-input>
          </el-form-item>

          <!--   先写死，后面从表里面查   -->
          <el-form-item label="车辆类型">
            <el-select v-model="carManagement.typeId" placeholder="请选择">
              <el-option
                v-for="carType in carTypes"
                :label="carType.typeName"
                :value="carType.id"
              ></el-option>

            </el-select>
          </el-form-item>

          <!--          <el-form-item label="车辆类型">-->
          <!--            <el-select v-model="carManagement.carType" placeholder="请选择">-->
          <!--              <el-option-->
          <!--                v-for=""-->
          <!--                :key=""-->
          <!--                :label="" -->
          <!--                :value=""-->
          <!--              ></el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->

          <el-form-item label="车牌号码">
            <el-input v-model="carManagement.carPlate" placeholder="请输入车牌号码"></el-input>
          </el-form-item>

          <el-form-item label="承运商">
            <el-select v-model="carManagement.carrierNumber" placeholder="请选择所属承运商">
              <el-option
                v-for="carCarrier in carCarriers"
                :label="carCarrier.carrierName"
                :value="carCarrier.carrierNumber "
              ></el-option>
              <!--              <el-option label="星城物流" value="1"></el-option>-->
            </el-select>
          </el-form-item>

          <el-form-item label="准载重量">
            <el-input v-model="carManagement.carWeight" append="千克" placeholder="请输入准载重量" readonly></el-input>
            <span style=" position: absolute; top: 1%; right: 1%;color: black; display: table-cell;white-space: nowrap;
            padding: 1px 10px;">千克</span>
          </el-form-item>

          <el-form-item label="准载体积">
            <el-input type="text" v-model="carManagement.carVolume" placeholder="请输入准载体积" readonly></el-input>
            <span style=" position: absolute; top: 1%; right: 1%;color: black; display: table-cell;white-space: nowrap;
            padding: 1px 10px;">方</span>
          </el-form-item>

          <el-form-item label="工作状态">
            <el-select v-model="carManagement.carStatus" placeholder="请输入">
              <el-option
                v-for="arr in arrs"
                :label="arr.label"
                :value="arr.value "
              ></el-option>
            </el-select>
          </el-form-item>
          <div style="margin: 20px">
            <el-button type="warning" @click="editCarManagement()">提交</el-button>
            <el-button @click="returnManagement()">取消</el-button>
          </div>

        </el-col>
      </el-form>

    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        carManagement: {},
        carCarriers: {},
        carStatuss: "",
        carTypes:[],
        arrs: [{
          value: 0,
          label: '在库'
        }, {
          value: 1,
          label: '已出车'
        }
        ]


      }
    },
    methods: {
      returnManagement(){
        this.$router.push("/car/management");
      },
      //修改功能
      editCarManagement(){
        this.$http({
          method:"put",
          url:"http://localhost/carManagement",
          data:this.carManagement
        }).then(resp=>{
          if (resp.data.code === 100000) {
            this.$message({
              message: resp.data.msg,
              type: 'success'
            })
            this.$router.push("/car/management");
          }
        })
      },
      //  根据id查询findManagementById
      findManagementById(id) {
        this.$http({
          method: "get",
          url: "http://localhost/carManagement/" + id,
        }).then(resp => {
          if (resp.data.code == 100000) {
            this.carManagement = resp.data.data;
          }
        })

      },
      //查询所有 承运商
      findCarrier() {
        this.$http({
          method: "get",
          url: "http://localhost/carCarrier/list"
        }).then(resp => {
          if (resp.data.code == 100000) {
            this.carCarriers = resp.data.data;
          }
        })
      },
      findCarTpye(){
        this.$http({
          method: "get",
          url: "http://localhost/carType"
        }).then(resp => {
          if (resp.data.code == 100000) {
            this.carTypes = resp.data.data;
          }
        })
      }
    },
    created() {
      let id = this.$route.query.id;
      console.log(id);
      this.findManagementById(id);
      this.findCarrier();
      this.findCarTpye();
    }
  }
</script>

<style scoped>
  div > div {
    padding: 3px;
  }
</style>
